<template>
  <div>
    <h1>v-bind</h1>
    <!-- 第一个class="box"是写死的 -->
    <div class="box"></div>
    <!-- 双大括号语法不能写在属性里面
      那如何解决 v-bind
     -->
    <!-- <div class="{{ aa }}"></div> -->
    <!-- v-bind:class="aa" 没有写死用的是data里的数据 -->
    <div v-bind:class="false ? aa : bb"></div>

    <!--
      没有用v-bind相当于写死了字符串 href在控制台看到的就是url 
      <a href="url">完整的 去百度</a> 
      -->
    <a v-bind:href="url">完整的 去百度</a>
    <!-- 简写 把v-bind去掉即可 上下两行代码等价 -->
    <a :href="url">简写 去百度</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      aa: 'box',
      bb: 'haha',
      url: 'https://www.baidu.com'
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin-bottom: 10px;
}
</style>